import { Breadcrumb, Button } from 'antd';

import { HomeOutlined } from '@ant-design/icons';

import { memo, useCallback, useEffect, useState } from 'react';

import { useNavigate, useParams } from 'react-router-dom';
import Review from '@/components/Review/Review';

import { CourseList, getCourseDetailApi, isJoinCourseApi, joinCourseApi } from '@/api/api';
import useApp from 'antd/es/app/useApp';
import dayjs from 'dayjs';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import rehypeSanitize from 'rehype-sanitize';
import 'github-markdown-css/github-markdown-light.css';
import './markdown.css'; // 导入自定义样式

// 课程详情页
const ClassroomDetail = () => {
  // 课程id
  const { id } = useParams();
  const app = useApp();
  const navigate = useNavigate();
  // 是否加入我的课堂
  const [isJoin, setIsJoin] = useState(false);

  // 课程详情
  const [course, setCourse] = useState<CourseList>({} as CourseList);

  // 获取课程详情
  const getCourseDetail = useCallback(async () => {
    const res = await getCourseDetailApi(id!);

    if (res.code === 200) {
      setCourse(res.data);
    }
  }, [id]);

  // 加入或移出我的课堂
  const handleJoin = async () => {
    const res = await joinCourseApi({
      course_id: id!,
    });

    if (res.code === 200) {
      app.message.success(res.data);
      setIsJoin(!isJoin);
    }
  };

  // 获取是否加入我的课堂
  const getIsJoin = useCallback(async () => {
    const res = await isJoinCourseApi(id!);
    setIsJoin(res.data);
  }, [id]);

  // 获取课程详情
  useEffect(() => {
    getIsJoin();
    getCourseDetail();
  }, [getIsJoin, getCourseDetail]);

  return (
    <div className="w-full min-w-[400px] h-full px-[5%] lg:px-[15%] md:px-[10%] sm:px-[5%] pt-[32px]">
      <div className="max-w-[1400px] mx-auto">
        {/* 路径显示 */}
        <Breadcrumb
          items={[
            {
              title: (
                <div
                  className="flex-center gap-2 cursor-pointer hover:bg-blue-100 rounded-md px-1 py-1"
                  onClick={() => {
                    navigate('/');
                  }}
                >
                  <HomeOutlined /> <span>首页</span>
                </div>
              ),
            },
            {
              title: (
                <div className="py-1">
                  <span>节日课堂</span>
                </div>
              ),
            },
            {
              title: (
                <div className="py-1">
                  <span> {course.name}</span>
                </div>
              ),
            },
          ]}
        />
        {/* 视频 */}
        <div className="w-full max-w-[1600px] mx-auto h-[540px] aspect-video mt-[32px]">
          <video
            controls
            className="w-full h-full object-fit [object-position:center] bg-[#000]"
            muted
            loop
            src={course.video_url}
          />
        </div>
        {/* 课程名称和发布时间 */}
        <div className="w-full max-w-[1600px] mx-auto mt-[32px] flex justify-between">
          <div className="text-[24px] font-bold flex items-end mb-4">
            <div> {course.name}</div>
            <div className="text-[14px] ml-4 mb-1">
              {dayjs(course.created_at).format('YYYY-MM-DD HH:mm')}
              发布
            </div>
          </div>
          <div className="text-[14px] ml-4 mb-1">
            {isJoin ? (
              <Button
                type="primary"
                danger
                onClick={handleJoin}
              >
                移出我的课程
              </Button>
            ) : (
              <Button
                type="primary"
                onClick={handleJoin}
              >
                加入我的课程
              </Button>
            )}
          </div>
        </div>
        {/* 课程简介 */}
        <div className="w-full flex gap-[32px]">
          {/* 课程简介 */}
          <div className="flex-1 text-[24px] font-bold bg-[#f0f0f0] p-[32px]">
            <div className="text-[16px] font-bold mb-4">课程简介</div>
            <div className="markdown-body text-[14px] overflow-auto">
              <ReactMarkdown
                remarkPlugins={[remarkGfm]}
                rehypePlugins={[rehypeRaw, rehypeSanitize]}
              >
                {course.content || ''}
              </ReactMarkdown>
            </div>
          </div>
          {/* 用户评论 */}
          <div className="flex-1  p-[10px] bg-[#f0f0f0]">
            <Review id={id!} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default memo(ClassroomDetail);
